<template>
  <div class="mine">
    <header>
      <!-- 顶部按钮/标题 -->
      <van-nav-bar border fixed placeholder>
        <template #left>
          <van-image
            src="https://i.loli.net/2021/07/18/PANOI2VRQaJnqHU.png"
            @click="gotonews"
          ></van-image
        ></template>
        <template #right>
          <van-image
            @click="gotoservice"
            src="https://i.loli.net/2021/07/18/j8XzFGMW6CohtaY.png"
          />
          <van-image
            src="https://i.loli.net/2021/07/18/u1dBlJHPyoN5VFK.png"
            class="righticon"
            is-link
            @click="showPopup"
          />
        </template>
      </van-nav-bar>
      <van-popup
        v-model:show="show"
        position="right"
        :style="{ height: '100%', width: '50%' }"
      >
        <van-button
          type="primary"
          @click="esclogin"
          block
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          v-if="token"
          plain
        >
          退出登录
        </van-button>
        <van-button
          type="primary"
          @click="login"
          block
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          v-else
        >
          去登录
        </van-button>
      </van-popup>
    </header>
    <!-- 用户信息栏 -->
    <main>
      <div class="left">
        <div class="userface" @click="gotoDetails">
          <img :src="userimg" alt="" @click="gotoDetails" v-if="userimg" />
        </div>
        <div class="username">
          <b v-if="token">{{ username }}</b>
          <b v-else>
            <b @click="gotologin">登录 </b> / <b @click="gotoregistry"> 注册</b>
          </b>
          <span v-if="token" @click="gotoedit">
            编辑资料
            <van-icon name="edit" />
          </span>
          <span v-else>免费领7天樊登讲书VIP</span>
        </div>
      </div>
      <div class="right" @click="gotosign">
        <van-image
          src="https://i.loli.net/2021/07/18/M98OI5kE2BdrTNH.png"
        /><span>签到有礼</span>
      </div>
    </main>
    <!-- 信息栏导航 -->
    <nav>
      <div v-for="(item, index) in navdata" :key="index" class="div">
        <img :src="item.url" alt="" />
        <span>{{ item.title }}</span>
      </div>
    </nav>
    <!-- 开通/展示vip -->
    <div class="openvip">
      <div class="left">
        <span>{{ uservip }}</span>
        <b>{{ downtime }}到期</b>
      </div>
      <div class="right" @click="gotovip">立即开通</div>
    </div>
    <!-- 用户账户卡券 -->
    <div class="userbank">
      <div v-for="(item, index) in userbank" :key="index">
        <span>{{ item.num }}</span>
        <b>{{ item.title }}</b>
      </div>
    </div>
    <!-- 活动导航 -->
    <div class="baike">
      <div class="childbox box1" @click="gotosign">
        <div>
          <b>每日签到</b>
          <span>连续签到积分递增<van-icon name="arrow" /></span>
        </div>
        <img src="https://i.loli.net/2021/07/17/X3KfDdeqVY9hZcb.png" />
      </div>
      <div class="childbox box2">
        <div>
          <b>邀请好友</b>
          <span>邀好友来读书<van-icon name="arrow" /></span>
        </div>
        <img src="https://i.loli.net/2021/07/17/jfMnvyxE5uQmoI9.png" />
      </div>
      <div class="childbox box3">
        <div>
          <b>积分商城</b>
          <span>积分兑换好物<van-icon name="arrow" /></span>
        </div>
        <img src="https://i.loli.net/2021/07/17/jfMnvyxE5uQmoI9.png" />
      </div>
      <div class="childbox">
        <div>
          <b>成长福利</b>
          <span>每天都可领积分<van-icon name="arrow" /></span>
        </div>
        <img src="https://i.loli.net/2021/07/17/g3BoRjzuvVaFmcU.png" />
      </div>
    </div>
    <!-- 底部导航 -->
    <footer>
      <router-link
        v-for="(item, index) in footernavdata"
        :key="index"
        :to="item.router"
        class="div"
      >
        <img :src="item.url" alt="" />
        <span>{{ item.title }}</span>
      </router-link>
    </footer>
    <!-- 底部内容 -->
    <van-empty
      class="footertxt"
      image="https://i.loli.net/2021/07/18/6uFmdY4xscj1HAN.png"
    >
      <span class="text">
        已经到底啦！<br />
        “还有很多地方等你探索哟”
      </span>
    </van-empty>
  </div>
</template>

<script>
import { ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { postEditChaXunApi, postEditApi } from "../../utils/loginapi";
export default {
  setup() {
    // 获取本地token判断是否登录
    const token = localStorage.getItem("token");
    // 侧边设置按钮弹出窗
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    // 用户名
    const username = ref("");
    const userimg = ref("");
    const userpoints = ref("0");
    onBeforeMount(() => {
      if (token) {
        postEditChaXunApi({ usertel: token }).then((res) => {
          username.value = res.data.username;
          userimg.value = res.data.userimg;
          userpoints.value = res.data.points || "0";
        });
      }
    });

    // 顶部导航栏数据渲染
    const navdata = ref([
      {
        title: "已购",
        url: "https://i.loli.net/2021/07/17/5s9olU4aSzGHY1Z.png",
        router: "/home/mine",
      },
      {
        title: "学习历史",
        url: "https://i.loli.net/2021/07/18/Ofups79eI4MjkgD.png",
        router: "/home/mine",
      },
      {
        title: "收藏",
        url: "https://i.loli.net/2021/07/17/9epOfvIMw8HV3P6.png",
        router: "/home/mine",
      },
      {
        title: "下载",
        url: "https://i.loli.net/2021/07/17/8OoCJSsfY6lrzBh.png",
        router: "/home/mine",
      },
    ]);
    const uservip = ref("樊登讲书VIP体验会员");
    const downtime = ref("2021年7月30日");
    // 用户账户金额栏信息

    const userbank = ref([
      {
        title: "账户",
        num: "0.0",
      },
      {
        title: "积分",
        num: userpoints,
      },
      {
        title: "礼品卡",
        num: "0.0",
      },
      {
        title: "优惠券",
        num: "0.0",
      },
    ]);
    // 底部导航栏数据渲染
    const footernavdata = ref([
      {
        title: "企读",
        url: "https://i.loli.net/2021/07/18/d5tkCPRJwrAnQfI.png",
        router: "/home/mine",
      },
      {
        title: "线下书店",
        url: "https://i.loli.net/2021/07/18/OpUqKPLji8lR1tE.png",
        router: "/Store",
      },
      {
        title: "联合福利",
        url: "https://i.loli.net/2021/07/18/Z9itdocSlCXT14b.png",
        router: "/home/mine",
      },
      {
        title: "我的书童",
        url: "https://i.loli.net/2021/07/18/smT6DjuJHclZOAg.png",
        router: "/home/mine",
      },
    ]);

    // 退出登录
    const $router = useRouter();
    const esclogin = () => {
      localStorage.removeItem("token");
      $router.push("/login");
    };
    // 登录按钮
    const login = () => {
      $router.push("/login");
    };
    // 路由跳转
    // 跳转vip页
    const gotovip = () => {
      $router.push("/vip");
    };
    // 跳转客服页
    const gotoservice = () => {
      $router.push("/service");
    };
    // 跳转签到页

    const gotosign = () => {
      if (token) {
        userpoints.value = +userpoints.value + 3;
        postEditApi({ usertel: token, points: userpoints.value }).then(
          (res) => {
            if (res.status === 0) {
              Toast("积分+3");
            } else {
              Toast("无法获取登录状态");
            }
          }
        );
        $router.push("/sign");
      } else {
        $router.push("/login");
      }
    };
    // 跳转注册页
    const gotoregistry = () => {
      $router.push("/registry");
    };
    // 跳转登录页
    const gotologin = () => {
      $router.push("/login");
    };
    // 跳转到个人详情页
    const gotoDetails = () => {
      if (token) {
        $router.push("/details");
      } else {
        $router.push("/login");
      }
    };
    // 跳转编辑页
    const gotoedit = () => {
      if (token) {
        $router.push("/edit");
      } else {
        $router.push("/login");
      }
    };
    // 跳转消息页
    const gotonews = () => {
      if (token) {
        $router.push("/News");
      } else {
        $router.push("/login");
      }
    };
    return {
      show,
      showPopup,
      userpoints,
      token,
      username,
      userimg,
      navdata,
      uservip,
      downtime,
      userbank,
      footernavdata,
      onBeforeMount,
      esclogin,
      login,
      gotovip,
      gotoservice,
      gotosign,
      gotoregistry,
      gotologin,
      gotoDetails,
      gotoedit,
      gotonews,
    };
  },
};
</script>

<style lang="less">
.mine {
  color: #040404;
  background: #f5f5f5;
  font-family: PingFang SC;
  padding-bottom: 30px;
  // 弹性盒4等分导航样式  display: flex;  justify-content: space-between;
  header,
  main,
  nav,
  footer,
  nav div,
  footer div,
  .openvip,
  .userbank,
  .baike .childbox {
    display: flex;
    justify-content: space-between;
  }
  //背景色白色
  .userbank,
  .baike,
  footer {
    background: #fff;
  }
  // 等宽346px;圆角10px
  .openvip,
  .userbank,
  .baike,
  footer {
    width: 346px;
    border-radius: 10px;
    margin: 15px auto;
  }
  header {
    width: 100%;
    font-size: 20px;
    .van-nav-bar {
      width: 100%;
      background: #f5f5f5;
    }
    img {
      width: 18px;
      height: 18px;
    }
    .righticon {
      margin-left: 14px;
    }
    .van-popup--right {
      button {
        position: absolute;
        bottom: 10px;
      }
    }
  }
  main {
    align-items: center;
    padding: 10px 0 10px 10px;
    .left {
      display: flex;
      .userface {
        display: inline-block;
        width: 62px;
        height: 62px;
        border-radius: 100%;
        background: #ccc;
        overflow: hidden;
        border: 4px solid #fde351;
        box-sizing: border-box;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.151);
        img {
          width: 62px;
          height: 62px;
        }
      }
      .username {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 7px;
        b {
          font-size: 18px;
          font-weight: bold;
          color: #040404;
          line-height: 18px;
        }
        span {
          margin-top: 5px;
          font-size: 12px;
          color: #040404;
          line-height: 18px;
        }
      }
    }
    .right {
      width: 84px;
      height: 26px;
      background: #fde351;
      border-radius: 13px 0px 0 13px;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-left: 3px;
        color: #040404;
      }
      img {
        width: 100%;
      }
    }
  }
  nav,
  footer {
    font-size: 12px;
    color: #040404;
    line-height: 18px;
    padding: 10px 0;
    .div {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;
    }
    img {
      height: 25px;
      margin-bottom: 6px;
    }
  }
  .openvip {
    height: 57px;
    background: #605e61;
    align-items: center;
    padding: 0 13px;
    box-sizing: border-box;
    .left {
      display: flex;
      flex-direction: column;
      span {
        font-size: 14px;
        color: #f0d9ad;
        line-height: 18px;
      }
      b {
        font-size: 12px;
        color: #e1e1e1;
        line-height: 18px;
      }
    }
    .right {
      width: 85px;
      height: 29px;
      background: #fce4ba;
      border-radius: 15px;
      font-size: 14px;
      color: #6c5338;
      line-height: 29px;
      text-align: center;
      cursor: pointer;
    }
  }
  .userbank {
    height: 72px;
    margin: 15px auto;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 25%;
      b {
        font-size: 12px;
        color: #b6b6b6;
        line-height: 18px;
      }
      span {
        font-size: 15px;
        font-weight: bold;
        color: #060606;
        line-height: 18px;
        margin-bottom: 5px;
      }
    }
  }
  .baike {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    height: 172px;
    font-size: 14px;
    .childbox {
      box-sizing: border-box;
      align-items: center;
      padding: 10px 8px 10px 14px;
      div {
        display: flex;
        flex-direction: column;
        justify-items: center;
        b {
          font-weight: bold;
          color: #151515;
          line-height: 18px;
        }
        span {
          font-size: 12px;
          color: #ea868b;
          line-height: 18px;
        }
      }
    }
    .box2,
    .box1 {
      border-bottom: 1px solid #e9e9e9;
    }
    .box3,
    .box1 {
      border-right: 1px solid #e9e9e9;
    }
    img {
      width: 30px;
      height: 30px;
    }
  }
  .footertxt {
    height: 120px;
    font-size: 12px;
    color: #040404;
    line-height: 18px;
    text-align: center;
    padding: 0;
    .van-empty__image img {
      width: 92px;
      height: 59px;
    }
  }
}
</style>
